﻿<!--
  @name: ToolValsCard
  @description: 工装内容显示，传感器码-传感器值 / 清空传感器、工装设置等功能
-->

<template>
  <el-card
    :shadow="isChecked ? `always` : `hover`"
    :class="{ 'checked-card': isChecked }"
    @click="handelCardClick"
    @contextmenu.prevent="onContextmenu($event)"
  >
    <template #header>
      <div style="display: flex; justify-content: space-between; align-items: center">
        <el-tag type="info" effect="light">工位 {{ toolInfo.stationNum }}</el-tag>
        <div style="display: flex; flex-direction: column">
          <el-text>{{ toolInfo.toolName }}</el-text>
          <el-text size="small" type="info">{{ toolInfo.toolCode }}</el-text>
        </div>
        <el-tag type="primary" effect="light" size="small" round>
          {{ toolInfo.sensors.length }}
        </el-tag>
      </div>
    </template>
    <template #default>
      <el-table
        height="200px"
        table-layout="auto"
        size="small"
        :show-header="false"
        :data="toolInfo.sensors"
      >
        <el-table-column title="插槽号" align="left" prop="slotNum" />
        <el-table-column title="仪器编号" align="left" prop="sensorCode">
          <template #default="{ row }">
            <el-text truncated>{{ row.sensorCode }}</el-text>
          </template>
        </el-table-column>
        <el-table-column v-if="!isEditMode" title="值" align="right" prop="sensorValue" />
        <el-table-column v-if="isEditMode" title="操作" align="right">
          <template #default="{ row }">
            <el-button
              :icon="CircleCloseFilled"
              type="danger"
              link
              @click="handelRemoveSensor(row.sensorCode)"
            />
          </template>
        </el-table-column>
      </el-table>
      <AgelContextMenu
        v-model="contextMenu.show"
        :x="contextMenu.x"
        :y="contextMenu.y"
        :menus="contextMenu.data"
        @select="contextMenu.onSelect"
      />
    </template>
  </el-card>
</template>

<script setup lang="ts">
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useSensorStore } from "@/store/business/sensor.store";
import { useSignalRStore } from "@/store/modules/signalr.store";
import { SignalrToken } from "@/enums/business/signalrToken.enum";

const sensorStore = useSensorStore();
const emit = defineEmits<{
  (event: "tool-setting-click"): void;
}>();

// 是否编辑模式（编辑模式true/数据显示模式false）
const isEditMode = computed(() => props.isEditMode);
// 当前工装数据
const isChecked = computed(
  () => isEditMode.value && sensorStore.currentToolCode == toolInfo.value.toolCode
);
// 工装数据
const toolInfo = computed(() => props.toolData);

const props = defineProps<{
  isEditMode: boolean;
  toolData: ToolInfo;
}>();

// region 传感器数据显示模式

// 获取SignalR 传感器数据
const signalrStore = useSignalRStore();
signalrStore.subscribe(
  SignalrToken.SensorVal,
  (sensorCode: string, value: number, time: string) => {
    value = Math.round(value * 100) / 100;
    toolInfo.value.sensors.forEach((sensor) => {
      if (sensor.sensorCode == sensorCode) {
        sensor.sensorValue = value;
        return;
      }
    });
  }
);

// endregion

// region 传感器设置模式

/**
 * 工装卡片点击，选中
 */
function handelCardClick() {
  sensorStore.setCurrentTool(toolInfo.value.toolCode);
}

/**
 * 移除传感器
 * @param code 传感器码
 */
function handelRemoveSensor(code?: string) {
  sensorStore.removeSelectedSensors(code);
}

// region 右键菜单

const MENU_NAME = {
  ClearAll: "清空传感器",
  StationSet: "工位设置",
};

const contextMenu = reactive({
  device: {},
  show: false,
  x: 0,
  y: 0,
  data: [],
  onSelect: (item: any) => {
    console.log(item);
    closeContextMenu();
    if (item.title === MENU_NAME.ClearAll) {
      handelRemoveSensor();
    } else if (item.title === MENU_NAME.StationSet) {
      emit("tool-setting-click");
    }
  },
});

function onContextmenu(e: MouseEvent) {
  handelCardClick();
  if (!isEditMode.value) return;
  // 根据设备连接状态动态生成菜单项
  contextMenu.data = [
    { title: MENU_NAME.ClearAll, icon: "Delete" },
    { title: MENU_NAME.StationSet, icon: "Setting" },
  ];

  contextMenu.show = true;
  contextMenu.x = e.clientX;
  contextMenu.y = e.clientY;
  e.preventDefault();
}
const closeContextMenu = () => {
  contextMenu.show = false;
};

watch(
  () => sensorStore.currentToolCode,
  (val) => {
    if (val !== toolInfo.value.toolCode) {
      closeContextMenu();
    }
  }
);

// endregion

// endregion
</script>

<style scoped lang="scss">
:deep(.el-card__header) {
  padding: 10px;
}
.checked-card :deep(.el-card__header) {
  padding: 10px;
  background-color: var(--el-color-primary-light-7);
}
:deep(.el-card__body) {
  padding: 10px;
}
</style>
